<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>{{ map.title }}</title>
    <meta name="robots" content="noindex, follow" />
    <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key={{ GOOGLE_API_KEY }}" type="text/javascript"></script> 
    <link href="{{ WEBMAPPER_CSS_URL }}/YahooReset.css" rel="stylesheet" type="text/css"/>
    <link href="{{ WEBMAPPER_CSS_URL }}/Text.css" rel="stylesheet" type="text/css" />
    <!--[if !IE]>
    	<link href="{{ WEBMAPPER_CSS_URL }}/NoIETextSize.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <style type="text/css"> 
        html {background-color: rgb(198,224,241);}
        body {overflow: hidden; margin: 10px;}
        body > div {overflow:hidden; width:100%; height:auto; margin:0; padding:0; }
        #StyledMap, #Map {position: relative; width:100%; height:{{ map_height }}px;}
        .ULMapCorner, .URMapCorner, .LLMapCorner, .LRMapCorner, .ULFigCorner, .URFigCorner, .LLFigCorner, .LRFigCorner {position: absolute; width: 8px; height: 8px; z-index: 5;}
        .ULMapCorner {top: 0px; left: 0px; background-image: url({{ WEBMAPPER_IMG_URL }}/ULMapCorner.png);}
        .URMapCorner {top: 0px; right: 0px; background-image: url({{ WEBMAPPER_IMG_URL }}/URMapCorner.png);}
        .LLMapCorner {bottom: 0px; left: 0px; background-image: url({{ WEBMAPPER_IMG_URL }}/LLMapCorner.png);}
        .LRMapCorner {bottom: 0px; right: 0px; background-image: url({{ WEBMAPPER_IMG_URL }}/LRMapCorner.png);}
        .ULFigCorner {top: 0px; left: 0px; background-image: url({{ WEBMAPPER_IMG_URL }}/ULFigCorner.png);}
        .URFigCorner {top: 0px; right: 0px; background-image: url({{ WEBMAPPER_IMG_URL }}/URFigCorner.png);}
        .LLFigCorner {bottom: 0px; left: 0px; background-image: url({{ WEBMAPPER_IMG_URL }}/LLFigCorner.png);}
        .LRFigCorner {bottom: 0px; right: 0px; background-image: url({{ WEBMAPPER_IMG_URL }}/LRFigCorner.png);}
    </style>

    <script type="text/javascript">
        google.load('maps', '2.x');
        function doSetup() {
            var center = new google.maps.LatLng({{map_center_lat}}, {{map_center_lon}});
            var gMap01 = new google.maps.Map2(document.getElementById('Map'));
            gMap01.setMapType(G_PHYSICAL_MAP);
            gMap01.setCenter(center, {{ map.zoom }});
            gMap01.enableScrollWheelZoom();
            gMap01.addControl(new GSmallMapControl());
            gMap01.addControl(new GMapTypeControl());
{% for layer in dynamic_layer_list %}
	    gMap01.addOverlay(new GGeoXml('{{ SITE_URL }}{% url layer-kml layer.unique_name %}'));
{% endfor %} {% for layer in static_layer_list %}
	    gMap01.addOverlay(new GGeoXml('{{ layer.kml_file.url }}'));
{% endfor %}
        }
    </script> 
</head> 
<body onunload="google.maps.Unload();" onload="doSetup()"> 
    <div> 
        <div id="StyledMap">
            <div id="Map"></div>
            <div class="ULMapCorner"></div><div class="URMapCorner"></div><div class="LLMapCorner"></div><div class="LRMapCorner"></div>
        </div>
        <div class="ULFigCorner"></div><div class="URFigCorner"></div><div class="LLFigCorner"></div><div class="LRFigCorner"></div>
{% if showkey %}
		<div style="width: 196px; height: 334px; float: right;">
		    <table style="font-size:small; font-family:arial, sans-serif; color:black; text-shadow:0 1px 1px white, 0 -1px 1px white, -1px 0 1px white, 1px 0 1px white;">
			<tr>
			    <td style="text-decoration:underline; text-align:center; width:42px;">Icon</td>
			    <td style="text-decoration:underline; text-align:center; width:100%;">Description</td>
			</tr>
{% for key in key_list %}
			<tr>
                            <td style="text-align:center;"><img style="max-width: 42px; max-height: 42px;" src="{{ key.graphic.url }}" alt="{{ key.title }}"/></td>
			    <td style="text-align:center;">{{ key.description }}</td>
			</tr>
{% endfor %}
		    </table>
		</div>
{% endif %}
{% if showcaption %}
		<p>{{ map.caption }}</p>
{% endif %}
    </div>
</body>
</html>
